<template>
	<view class="loading-wrap" v-if="loading">
		<image :src="`${sourceUrl}/loading.gif`" class="loading-icon"></image>
		<text v-if="showText" class="loading-text">{{ text }}</text>
	</view>
</template>

<script>
	export default {
		props: ['loading', 'text'],
		computed: {
			showText() {
				const { text } = this
				if (typeof text !== 'string') return false
				return !!(text.length)
			}
		},
	}
</script>

<style lang="scss" scoped>
	.loading-wrap {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32rpx 0;
		flex-flow: column;
		align-items: center;

		.loading-text {
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #8f9ca2;
		}

		.loading-icon {
			width: 128rpx;
			height: 128rpx;
		}
	}
</style>